<script lang="ts" setup>
import { ref } from "vue";
import ProductBox from "../Common/ProductBox.vue";
import SecureEntry from "./SecureEntry.vue";
import { useRouter } from "vue-router";

const router = useRouter()

const open = ref<boolean>(false);
const open2 = ref<boolean>(false);
const open3 = ref<boolean>(false);

const handleOk3 = (e: MouseEvent) => {
  console.log(e);
  open.value = false;
};

const handleOk2 = (e: MouseEvent) => {
  console.log(e);
  open.value = false;
};

const handleOk = (e: MouseEvent) => {
  console.log(e);
  open.value = false;
};

const defineSetting = [
  {
    title: "实名认证",
    subTitle: "账户需完成实名认证，方可进行合同申请、开具发票等操作。",
    button: "前往认证",
    event: () => {
      // window.location.href = "/#/account/identify";
      router.push({
        path: '/account/identify'
      })
    },
  },
  {
    title: "添加常用地址",
    subTitle: "",
    button: "前往添加",
    event: () => {
      // window.location.href = "/#/account/address";
      router.push({
        path: '/account/address'
      })
    },
  },
  {
    title: "完善发票信息",
    subTitle: "",
    button: "前往完善",
    event: () => {
      // window.location.href = "/#/account/receiptManagement";
      router.push({
        path: '/account/receiptManagement'
      })
    },
  },
  {
    title: "定期修改登录密码",
    subTitle:
      "安全性高的密码可以使帐号更安全。建议您定期更换密码，设置一个包含字母，符号或数字中至少两项且长度超过6位的密码。",
    button: "修改",
    event: () => {
      open.value = true;
    },
  },
];

const dataSource = ref([
  {
    key: "1",
    name: "xxxx",
    ip: "255.255.255.255",
    operatingSys: "linux",
    time: "2022-02-05",
    browser: "chrome",
  },
  {
    key: "1",
    name: "xxxx",
    ip: "255.255.255.255",
    operatingSys: "linux",
    time: "2022-02-05",
    browser: "chrome",
  },
  {
    key: "1",
    name: "xxxx",
    ip: "255.255.255.255",
    operatingSys: "linux",
    time: "2022-02-05",
    browser: "chrome",
  },
  {
    key: "1",
    name: "xxxx",
    ip: "255.255.255.255",
    operatingSys: "linux",
    time: "2022-02-05",
    browser: "chrome",
  },
]);

const columns = ref([
  {
    title: "操作名称",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "ip",
    dataIndex: "ip",
    key: "ip",
  },
  {
    title: "操作系统",
    dataIndex: "operatingSys",
    key: "operatingSys",
  },
  {
    title: "浏览器",
    dataIndex: "browser",
    key: "browser",
  },
  {
    title: "时间",
    dataIndex: "time",
    key: "time",
  },
]);

</script>
<template>
  <div class="pr-5 pl-5">
    <ProductBox title="安全设置">
      <template #default>
        <div class="flex flex-col md:flex-row">
          <div class="flex flex-col md:w-90  w-full ">
            <div class="flex flex-col bg-gray-100 p-5 rounded border-2">
              <div class="flex mb-4">
                <div class="pr-2 rounded">
                  <img src="/console/user0.png" alt="" />
                </div>
                <div class="flex-col flex">
                  <span class="pt-5">123456</span>
                  <router-link to="/account/profile">
                    <a-button type="link" class="p-0 leading-0">
                      修改基本信息
                    </a-button>
                  </router-link>
                </div>
              </div>

              <div class="flex flex-col pl-5">
                <div class="flex text-sm text-gray-600 pb-4">
                  <span class="w-20 text-md">会员ID:</span>
                  <span>123456</span>
                </div>
                <div class="flex text-sm text-gray-600 pb-4">
                  <span class="w-20 text-md">安全手机:</span>
                  <span>1876****622</span>
                </div>
                <div class="flex text-sm text-gray-600">
                  <span class="w-20 text-md">注册时间:</span>
                  <span>2022-05-05 17:04:03</span>
                </div>
              </div>
            </div>

            <div class="flex items-center h-15 pl-5 mt-5">
              <span class="font-bold text-sm">快速通道</span>
            </div>

            <ul class="flex flex-col bg-gray-100 rounded pl-5 pr-5 line mb-0 border-2">
              <li class="flex items-center h-12 hover:text-blue-700" @click="open = true">
                <img src="/console/lock.png" alt="" />
                <span class="text-sm">修改密码</span>
              </li>
              <li class="flex items-center justify-between h-12 hover:text-blue-700" @click="open2 = true">
                <div class="flex items-center">
                  <img src="/console/phone.png" alt="" />
                  <span class="text-sm">手机</span>
                </div>
                <span class="text-sm cursor-pointer">修改</span>
              </li>
              <li class="flex items-center justify-between h-12 hover:text-blue-700" @click="open3 = true">
                <div class="flex flex-1 items-center">
                  <img src="/console/mail.png" alt="" />
                  <span class="text-sm">邮箱</span>
                </div>
                <span class="text-sm cursor-pointer">绑定</span>
              </li>
              <li class="flex items-center justify-between h-12 hover:text-blue-700">
                <div class="flex flex-1 items-center">
                  <img src="/console/document.png" alt="" />
                  <span class="text-sm">文档中心</span>
                </div>
                <span class="text-sm cursor-pointer"></span>
              </li>
            </ul>
          </div>

          <div class="flex flex-col pl-5 flex-1 pt-10 md:pt-0">
            <SecureEntry :title="item.title" :sub-title="item.subTitle" :button-text="item.button" @click="item.event"
              v-for="(item, index) in defineSetting" :key="index + 'setting'" />
            <p class="borderLine mb-6"></p>

            <div class="flex items-center mb-2">
              <img src="/console/time-fill.png" alt="" class="w-6 h-6 mr-3" />
              <span class="font-bold text-teal-600 text-lg">操作历史</span>
            </div>

            <a-table :scroll="{ x: 1000, }" :dataSource="dataSource" :columns="columns" />
          </div>
        </div>
      </template>
    </ProductBox>

    <a-modal v-model:open="open" title="修改密码" @ok="handleOk">
      <a-form class="mt-10" :labelCol="{
        span: 5,
      }">
        <a-form-item label="当前密码">
          <a-input></a-input>
        </a-form-item>
        <a-form-item label="">
          <div class="pl-25">
            <p>· 密码长度8~20字符</p>
            <p>· 必须存在数字字符</p>
            <p>· 必须存在英文字符</p>
            <p>· 特殊字符只支持 ()~!@#$%^&*-+=|[]:;,.?/</p>
          </div>
        </a-form-item>

        <a-form-item label="新密码">
          <a-input></a-input>
        </a-form-item>
        <a-form-item label="确认密码">
          <a-input></a-input>
        </a-form-item>
      </a-form>
    </a-modal>

    <a-modal v-model:open="open2" title="修改手机号" @ok="handleOk2">
      <a-form class="mt-10" :labelCol="{
        span: 5,
      }">
        <a-form-item label="新手机号">
          <a-input></a-input>
        </a-form-item>
        <a-form-item label="图形验证码">
          <div class="flex">
            <a-input class="w-30"></a-input>
            <img src="/logo.svg" alt="" class="h-10 ml-5" />
          </div>
        </a-form-item>

        <a-form-item label="验证码">
          <a-input class="w-30 mr-5"></a-input>
          <a-button>获取验证码</a-button>
        </a-form-item>
      </a-form>
    </a-modal>

    <a-modal v-model:open="open3" title="修改邮箱" @ok="handleOk3">
      <a-form class="mt-10" :labelCol="{
        span: 5,
      }">
        <a-form-item label="邮箱">
          <a-input></a-input>
        </a-form-item>
        <a-form-item label="图形验证码">
          <div class="flex">
            <a-input class="w-30"></a-input>
            <img src="/logo.svg" alt="" class="h-10 ml-5" />
          </div>
        </a-form-item>

        <a-form-item label="验证码">
          <a-input class="w-30 mr-5"></a-input>
          <a-button>获取验证码</a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<style lang="scss" scoped>
.borderLine {
  border-bottom: 1px solid #e6ebf5;
}

.line {
  li {
    border-bottom: 1px solid rgb(235, 229, 229);
    cursor: pointer;

    img {
      $size: 1rem;
      width: $size;
      height: $size;
      margin-right: 0.75rem;
      margin-left: 0.25rem;
    }
  }

  li:last-child {
    border-bottom: 0;
  }
}
</style>
